<template>
	<view class="cardApplication">
		<view class="content">
			<view class="title">
				辽宁大学校友会联谊
			</view>
			<view class="input_box">
				<view class="name">
					活动时间
				</view>
				<view class="text">
					2022-04-30 14:00 至 2022-04-30 21:00
				</view>
			</view>
			<view class="input_box">
				<view class="name">
					活动地点
				</view>
				<view class="text">
					辽宁省沈阳市皇姑区崇山中路66号
				</view>
			</view>
			<view class="input_box">
				<view class="name">
					活动费用
				</view>
				<view class="text">
					人民币25元
				</view>
			</view>
			<view class="background"></view>
			<view class="input_box">
				<view class="name">
					姓名
				</view>
				<view class="text">
					齐琨
				</view>
			</view>
			<view class="input_box">
				<view class="name">
					手机号码<text class="red">*</text>
				</view>
				<input type="text" :disabled="disabled" v-model="num" placeholder="请输入手机号码">
				<view class="modify" @click="disabled = false">
					修改
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">
				申请校友卡
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const disabled = ref(true)
	const num = '13503509999'
</script>

<style lang="scss">
	.cardApplication{
		width: 100vw;
		height: 100vh;
		position: relative;
		.content{
			width: 100%;
			height: auto;
			padding: 40rpx 40rpx 160rpx 40rpx;
			box-sizing: border-box;
			.title{
				font-size: 40rpx;
				text-align: center;
				color: #333333;
				line-height: 70rpx;
				margin-bottom: 40rpx;
			}
			.input_box{
				width: 100%;
				border-bottom: 1rpx solid #F1F1F1;
				display: flex;
				margin-bottom: 40rpx;
				padding-bottom: 28rpx;
				.name{
					width: 150rpx;
					.red{
						color: #EA0000
					}
				}	
				.text{
					font-size: 28rpx;
					flex: 1;
				}
				input{
					flex: 1;
				}
				.modify{
					font-size: 28rpx;
					color: #275BA8;
				}
			}
			.background{
				width: 100vw;
				height: 20rpx;
				background: #F6F6F6;
				margin-left: -40rpx;
				margin-bottom: 40rpx;
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			right: 0;
			display: flex;
			justify-content: center;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(140,140,140,0.302);
			width: 100%;
			padding-top: 16rpx;
			.btn{
				width: 710rpx;
				height: 80rpx;
				background: #275BA8;
				border-radius: 16rpx;
				font-size: 32rpx;
				line-height: 80rpx;
				text-align: center;
				color: #ffffff;
			}
		}
	}
</style>